<template>
    <!-- Add your content here -->
     <h3 class="text-h6 mb-4 title">{{title}}</h3>
    <v-data-table :headers="headers" :items="items" >
        <template v-slot:item.change="{ item }">
            <DataCell :value="item.change" arrow />
        </template>
        <template v-slot:item.changePercent="{ item }">
            <DataCell :value="item.changePercent" percent arrow />
        </template>
    </v-data-table>
</template>
<script lang="ts" setup>
const props = defineProps({
    headers: {
        type: Array,
        default: () => [],
    },
    items: {
        type: Array,
        default: () => [],
    },
    title: {
        type: String,
        default: '股票行情',
    },
});
</script>
<style scoped>
.title {
    font-size: 20px;
    font-weight: bold;
    margin-top: 16px;
    text-align: center;
}
</style>